<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>table 数据表格文档 - layui.table</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		
		<!-- 这里同样支持 laytpl 语法，如： -->
		{{#  if(d.auth > 2){ }}
		  <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
		{{#  } }}
	  </script>

	<table id="demo" lay-filter="test"></table>
	<br /><br />
	<table id="demo2" lay-filter="test2"></table>
	<br /><br />
	<table id="demo3" lay-filter="test3"></table>

	<script>
		layui.use('table', function () {
			var table = layui.table;

			//第一个实例
			table.render({
				elem: '#demo'
				//, height: 312
				, url: '../assets/table/data.json' //数据接口
				, page: true //开启分页
				, toolbar: 'default'
				, cols: [[ //表头
					{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
					, { field: 'username', title: '用户名', width: 80 }
					, { field: 'checkbox', type: 'checkbox' }
					, { field: 'radio', type: 'radio' }
					, { field: 'numbers', type: 'numbers' }
					, { type: 'space', width: 177 }

					, { field: 'experience', title: '积分', width: 80, sort: true, hide: true }
					, { field: 'score', title: '评分', width: 80, sort: true }
					, { field: 'classify', title: '职业', width: 80 }
					, { field: 'wealth', title: '财富', width: 135, sort: true }
				]]
			});


			//合并单元格
			table.render({
				elem: '#demo2'
				, url: '../assets/table/data.json' //数据接口
				, cols: [[ //标题栏
					{ field: 'username', title: '联系人', width: 80, rowspan: 2 } //rowspan即纵向跨越的单元格数
					, { field: 'amount', title: '金额', width: 80, rowspan: 2 }
					, { align: 'center', title: '地址', colspan: 3 } //colspan即横跨的单元格数，这种情况下不用设置field和width
				], [
					{ field: 'province', title: '省', width: 80 }
					, { field: 'city', title: '市', width: 120 }
					, { field: 'county', title: '详细', width: 300 }
				]]
			});


			
			table.render({
				elem: "#demo3",
				url: '../assets/table/data.json',
				toolbar: 'default',
				// 必须先开启 toolbar 时，defaultToolbar 才生效
				defaultToolbar: ['filter', 'print', 'exports', {
					title: '提示' //标题
					, layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
					, icon: 'layui-icon-tips' //图标类名
				}]
				,cols: [[
					{ field: 'id', title: 'ID', width: 100 }
					, { fixed: 'right', align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
					, { fixed: 'right', align: 'center', field: 'username', title: 'username' }
					, { fixed: 'right', align: 'center', field: 'title', title: 'title' }
				]]
				, done: function (res, curr, count) {
					//如果是异步请求数据方式，res即为你接口返回的信息。
					//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
					console.log("res:", res);

					//得到当前页码
					console.log("curr:", curr);

					//得到数据总量
					console.log("count:", count);
				}
			});

			

		});



	</script>



</body>

</html>